<template>
  <Header></Header>

  <div class="container">
    <div class="main">
      <div v-for="(article,index) in articles" :key="index">
        <div class="article-item">
          <div class="cover">
            <img :src="article.cover" alt=""/>
          </div>
          <div class="article-info">
            <div class="title" @click="goArticleDetail(article.id)">{{ article.title }}</div>
            <div class="article-info">
              <div class="info-wrapper">
                <div class="created">
                  <el-icon>
                    <Clock/>
                  </el-icon>
                  {{ article.createTime }}
                </div>
                <div class="category" @click="goCategoryArticleListPage(article.category.id)">
                  <el-icon>
                    <Folder/>
                  </el-icon>
                  {{ article.category.name }}
                </div>
                <div class="tags">
                  <div class="tag" v-for="(tag,index) in article.tags" :key="index"
                       @click="goTagArticleListPage(tag.id)">

                    <el-tag type="success">
                      {{ tag.name }}
                    </el-tag>
                  </div>
                </div>
              </div>
              <div class="summary">
                {{ article.summary }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <el-pagination
          size="small"
          background
          layout="prev, pager, next"
          :total="1000"
          class="pagination"
      />
    </div>
    <div class="right-side">

      <div class="category-wrapper">
        <h2 class="title">分类</h2>
        <div class="categories">
          <a @click="goCategoryArticleListPage(item.id)" v-for="(item, index) in categories" :key="index">
            <el-button type="success" size="small" round>{{ item.name }} </el-button>
          </a>
        </div>
      </div>

      <div class="tags-wrapper">
        <h2 class="title">标签</h2>
        <div class="tags">
          <a @click="goTagArticleListPage(item.id)" v-for="(item, index) in tags" :key="index">
            <el-button type="success" size="small" round>{{ item.name }}</el-button>
          </a>
        </div>
      </div>
    </div>
  </div>

  <Footer></Footer>
</template>
<style lang="less" scoped>
.container {
  max-width: 1230px;
  margin: 10px auto;
  background-color: #f5f5f5;
  display: flex;
  border-radius: 10px;
}

.main {
  width: 75%;
  height: 1500px;
  margin-right: 10px;
  background-color: #fff;
  //增加阴影效果
  box-shadow: 0 0 2px #888;

  .article-item {
    margin: 10px;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    display: flex;

    .cover {
      img {
        width: 180px;
        height: 120px;
      }
    }

    .article-info {
      margin-left: 10px;
      width: 700px;

      .title {
        font-size: 20px;
        line-height: 30px;
        font-weight: 600;
      }

      .info-wrapper {
        display: flex;
        margin-top: 10px;

        .created {
          margin-right: 10px;
        }

        .categories {
          margin-right: 10px;
          border-radius: 2px;
          border: 1px solid #ccc;
        }

        .tags {
          display: flex;

          .tag {
            margin-right: 5px;
          }
        }


        .summary {

        }
      }
    }
  }

  .pagination {
    width: 50%;
    margin: 0 auto;
  }
}

.right-side {
  width: 25%;
  height: 500px;
  background-color: #fff;

  .category-wrapper {
    .title {
      font-size: 18px;
      font-weight: 600;
      margin:10px 2px;
    }

    margin: 10px;

    .categories {
      .item {
        border: 1px solid #ccc;
        border-radius: 5px;
        display: inline-block;
        padding: 5px;
        font-weight: 600;
        color: #1a4f76;
        margin-right: 2px;
        &:hover {
          background-color: #1a4f76;
          color: #fff;
        }
        .name {
          font-size: 15px;
          margin: 2px;
          padding: 2px 10px;
        }

        .count {
          width: 15px;
          height: 15px;
          border-radius: 50%;
        }
      }
    }

  }

  .tags-wrapper {
    .title {
      font-size: 18px;
      font-weight: 600;
    }

    margin: 10px;

    a {
      display: inline-block;
      margin: 2px;
    }
  }
}
</style>
<script setup>
import Header from '@/layouts/components/Header.vue'
import Footer from '@/layouts/components/Footer.vue'
import UserInfoCard from '@/components/UserInfoCard.vue'
import {useRouter} from 'vue-router'
import {reactive, ref} from 'vue'
import {getIndexArticles} from '@/api/frontend'
import {getCategories} from '@/api/frontend/category'
import {getTags} from '@/api/frontend/tag'
import {Clock, CollectionTag, Folder} from "@element-plus/icons-vue";

const router = useRouter()

const goArticleDetail = (articleId) => {
  console.log('跳转详情页' + articleId)
  router.push({path: `/article/detail/${articleId}`})
}

const articles = ref([])
// 当前页码
const current = ref(1)
const total = ref(0)
const size = ref(10)
const pages = ref(0)

// 获取分页数据
function getArticles(currentNo) {
  console.log('获取分页数据')
  getIndexArticles({current: currentNo, size: size.value})
      .then((res) => {
        console.log(res)
        if (res.success) {
          articles.value = res.data
          current.value = res.current
          total.value = res.total
          size.value = res.size
          pages.value = res.pages
        }
      })
}

getArticles(current.value)

// 获取分类
const categories = ref([])
getCategories().then((e) => {
  console.log('获取分类数据')
  console.log(e)
  categories.value = e.data
})


// 获取标签
const tags = ref([])
getTags().then((e) => {
  console.log('获取标签数据')
  console.log(e)
  tags.value = e.data
})


const goCategoryArticleListPage = (id) => {
  router.push({path: `/category/page/${id}`})
}

const goTagArticleListPage = (tagId) => {
  console.log('跳转 id' + tagId)
  router.push({path: `/tag/list/${tagId}`})
}

</script>

